<template>
  <div class="products-index-main">
    <div class="products-index-page">
      <Header style="margin-bottom: 63px" />
      <el-tabs
        v-model="categoryId"
        v-loading="loading"
        element-loading-text="Loading..."
        :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(0,0,0, 0)"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="v in category"
          :key="v.id"
          :label="v.name"
          :name="v.id"
        >
        </el-tab-pane>
        <div class="flex flex-wrap space-between">
          <div v-for="v in productsList" :key="v.id" class="products-item-wrap">
            <el-image
              :key="v.shop_window"
              class="shop_window"
              :src="v.shop_window"
              lazy
            />
            <div class="products-title">{{ v.title }}</div>
            <div class="flex align-center space-center">
              <div class="products-describe ellipsis-multiline">
                {{ v.describe }}
              </div>
            </div>
            <div class="flex align-center space-center">
              <a
                :href="`/products/detail?id=${v.id}`"
                target="_blank"
                class="products-learn_more flex space-center align-center"
              >
                {{ v.learn_more }}
              </a>
            </div>
          </div>
        </div>
        <div class="flex align-center space-center products-pagination">
          <el-pagination
            v-model:current-page="page"
            background
            layout="prev, pager, next"
            :default-page-size="limit"
            :total="total"
            @current-change="currentChange"
          />
        </div>
      </el-tabs>
    </div>
    <Footer style="margin-top: 100px" />
  </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
const { $apiFetch } = useNuxtApp()
const { state, updateLang } = usePageData()
const { menu, configMenu } = useData()

const route = useRoute()
const productsData = useState('products-data', () => ({
  products: {},
}))

const categoryId = ref(route.query.categoryId * 1 || 0)
const page = ref(1)
const loading = ref(false)
const limit = 18

const { data, error } = await useAsyncData('products-data', () =>
  $apiFetch(`/products`, {
    method: 'GET',
    params: {
      lang: state.value.language,
      category_id: categoryId.value,
      limit,
      page: page.value,
    },
  }),
)

if (!error.value) {
  productsData.value.products = data.value.data
}

const category = computed(() => {
  return productsData.value.products.category
})
const productsList = computed(() => {
  return productsData.value.products.list
})

const total = computed(() => {
  return productsData.value.products.count
})

const getData = async () => {
  if (loading.value) return
  loading.value = true
  const res = await $apiFetch(`/products`, {
    method: 'GET',
    params: {
      lang: state.value.language,
      category_id: categoryId.value,
      limit,
      page: page.value,
    },
  })
  loading.value = false
  productsData.value.products = res.data
}

const currentChange = () => {
  getData()
}
const handleClick = () => {
  page.value = 1
  nextTick(() => {
    getData()
  })
}
</script>
<style lang="scss">
.products-index-main {
  background: #171a26 !important;
  min-width: 1200px;
}
.products-index-page {
  width: 1200px;
  margin: 0 auto;
  .header-products-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 29px;
    margin-bottom: 63px;
    .head-logo {
      width: 280px;
      height: 68px;
    }
  }
  .el-tabs__header {
    margin-bottom: 44px;
  }
  .el-tabs__item {
    font-weight: 800;
    font-size: 24px;
    flex: 1;
    color: rgba(255, 255, 255, 0.4);
    padding-bottom: 9px;
    &:hover {
      color: #fff;
    }
  }
  .el-tabs__item.is-active {
    color: #fff;
    font-weight: 800;
  }
  .el-tabs__active-bar {
    background: #fff;
    height: 4px;
  }
  .el-tabs__nav-wrap:after {
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
  }
  .el-tabs__nav {
    width: 100%;
  }
  .shop_window {
    width: 384px;
    height: 384px;
  }
  .products-item-wrap {
    margin-bottom: 46px;
    .products-title {
      font-size: 24px;
      color: #fff;
      font-weight: 800;
      margin-top: 0.6vw;
      text-align: center;
      margin-bottom: 0.5vw;
    }
    .products-describe {
      font-size: 18px;
      color: #fff;
      text-align: center;
      width: 300px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.65);
      // margin: 0 0.5vw;
    }
    .products-learn_more {
      width: 120px;
      height: 31px;
      border: 2px solid #ffffff;
      font-weight: bold;
      color: #fff;
      font-size: 18px;
      margin-top: 15px;
      cursor: pointer;
    }
  }
  .ellipsis-multiline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 定义文本的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .products-pagination {
    margin-top: 2.5vw;
  }
  .white {
    color: #fff !important;
  }
  .ml40 {
    margin-left: 40px !important;
  }
  .ml48 {
    margin-left: 48px !important;
  }
  .ml10 {
    margin-left: 10px !important;
  }
  .fs-24 {
    font-size: 24px !important;
  }
}
</style>
